<template>
  <div class="bp">
    <!-- 头部导航栏 -->
    <TopNav tn-name="" title="确定订单"></TopNav>
    <!-- 选择收货地址 -->
    收货地址：
    <van-cell is-link>
      <van-radio-group v-model="radio">
        <van-radio name="1">
          姓名
          电话
          <van-tag round type="danger">默认</van-tag>
          <br>
          地址
        </van-radio>
      </van-radio-group>
    </van-cell>

    <!-- 展示下单商品 -->
    订单商品：
    <van-cell class="vc-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        />
        </van-cell>
      </van-list>
    </van-cell>

    <!-- 支付方式 -->
    支付方式：
    <van-cell-group>
    <van-cell>
      <van-radio-group v-model="radioPay">
        <van-radio name="1">
          <img
            width="150rem"
            height="40rem"
            fit="contain"
            src="../assets/alipay.png"
          />
          <van-tag type="danger">推荐</van-tag>
        </van-radio>
      </van-radio-group>
    </van-cell>
    </van-cell-group>
    <!-- 优惠信息 -->
    优惠信息：
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    <!-- 底部功能栏 -->
    <van-cell>
      <van-submit-bar :price="totalPrice*100" button-text="确认支付" @submit="onSubmit" />
    </van-cell>
    <!-- 占位盒子 -->
    <div class="zwh"></div>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';

  const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 150,
    name: '优惠券名称',
    startAt: 1489104000,
    endAt: 1514592000,
    valueDesc: '1.5',
    unitDesc: '元',
  };

  export default{
    components:{
      TopNav
    },
     data() {
        return {
          radio:'1',
          radioPay:'1',
          list: [1,2,3,4,5],
          loading: false,
          finished: false,
          chosenCoupon: -1,
          coupons: [coupon],
          disabledCoupons: [coupon],
          showList:false,
          totalPrice:0,
          num:0,
          shippingId:1,
          orderNo:'',
          pay:'',
        };
      },
       methods: {
          onLoad() {
            // 异步更新数据
            this.loading = false;
          },
          onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;
              },
          onExchange(code) {
                this.coupons.push(coupon);
              },
          onSubmit(){
            // 确定订单
            this.axios.get("/rlg/order/insert?shippingId="+this.shippingId+"&payment="+this.totalPrice).then((rs) => {
              if (rs.data.code == 200) {
                this.orderNo = rs.data.data.orderId;
                this.$dialog.confirm({
                  title: '通知',
                  message: '订单创建成功！',
                  confirmButtonText:'立即支付',
                })
                  .then(() => {
                    // 点击确认，跳转支付页面
                    // 跳转支付界面
                    var params = new URLSearchParams();
                    params.append('shopName', '睿乐购商城');
                    params.append('orderNo', this.orderNo);
                    params.append('totalPrice', this.totalPrice);


                    this.axios.post('/rlg/zfb/zf',params)
                      .then((response) => {
                        // 把返回数据输出到页面
                        if(response.data.code == 200){
                          // this.pay = response.data.data;
                          const div = document.createElement('div')
                                  /* 此处form就是后台返回接收到的数据 */
                                  div.innerHTML = response.data.data;
                                  document.body.appendChild(div);
                                  document.forms[0].submit();
                        }else{
                          this.$toast.fail(response.data.msg);
                        }

                      });
                  })
                  .catch(() => {
                    // 点击取消，跳转订单页面
                    this.$router.push("/order");
                  });
              }
            });
          }
        },
        created() {
          // 查询当前购物车中选中商品总价和数量
          this.axios.get("/rlg/cart/total").then((rs) => {
            if (rs.data.code == 200) {
              this.totalPrice = rs.data.data.totalPrice;
              this.num = rs.data.data.num;
            }
          });
        }
  }
</script>

<style>
  .zwh{
    height: 50px;
  }
  .vc-list{
    /* height: 300px !important; */
    overflow: auto !important;
  }
</style>
